<template>
  <nav class="nav">
    <ul>
      <li><router-link to="/" class="nav-link">主页</router-link></li>
      <li><router-link to="/home1" class="nav-link">网站首页</router-link></li>
      <li><router-link to="/revolutionary-heroes" class="nav-link">详细介绍</router-link></li>
      <li><router-link to="/latest-documents" class="nav-link">最新文献</router-link></li>
      <li><router-link to="/video-materials" class="nav-link">影视资料</router-link></li>
      <li><router-link to="/audio-materials" class="nav-link">革命英雄</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Nav'
}
</script>

<style scoped>
.nav {
  background-color: #b71c1c;
  color: white;
  padding: 10px 20px;
}
.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}
.nav li {
  cursor: pointer;
}
.nav-link {
  color: white;
  text-decoration: none;
}
.nav-link.router-link-active {
  color: #ffeb3b; /* 高亮颜色，可以根据需要更改 */
  font-weight: bold; /* 加粗字体 */
}
</style>